<template>
  <Dialog v-model="dialogVisible" title="随机生成能耗上报数据" width="650px">
    <el-form :model="randomDataForm" label-width="120px">
      <el-form-item label="设备数量">
        <el-input-number
          v-model="randomDataForm.deviceCount"
          :min="1"
          :max="10"
          controls-position="right"
        />
      </el-form-item>
      <el-form-item label="数据条数">
        <el-input-number
          v-model="randomDataForm.dataCount"
          :min="1"
          :max="20"
          controls-position="right"
        />
      </el-form-item>
      <el-form-item label="数据类型">
        <el-select
          v-model="randomDataForm.dataTypes"
          multiple
          placeholder="选择数据类型"
          style="width: 100%"
        >
          <el-option
            v-for="item in reportDataTypeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="时间范围">
        <el-date-picker
          v-model="randomDataForm.timeRange"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          value-format="YYYY-MM-DD HH:mm:ss"
          style="width: 100%"
        />
      </el-form-item>
    </el-form>

    <!-- 随机生成的JSON预览 -->
    <div v-if="randomJsonData">
      <div class="flex justify-between items-center mb-2">
        <div class="text-gray-700 font-bold">生成的JSON数据：</div>
        <el-button type="primary" size="small" @click="copyJsonToClipboard">
          <Icon icon="ep:copy-document" class="mr-5px" /> 复制
        </el-button>
      </div>
      <el-input
        type="textarea"
        v-model="randomJsonData"
        :rows="10"
        :readonly="true"
        class="json-preview"
      />
    </div>

    <template #footer>
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="generateRandomData">生成数据</el-button>
      <el-button type="success" :disabled="!randomJsonData" @click="submitRandomData">
        提交数据
      </el-button>
    </template>
  </Dialog>
</template>

<script lang="ts" setup>
import * as ReportApi from '@/api/energy/report'
import * as DeviceApi from '@/api/energy/device'
import {
  reportDataTypeOptions,
  reportDataLevelOptions,
  reportStatusOptions
} from '@/api/energy/report'
import { DeviceVO } from '@/api/energy/device'
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox, ElNotification } from 'element-plus'
import Dialog from '@/components/Dialog/src/Dialog.vue'
import dayjs from 'dayjs'

const dialogVisible = ref(false)
const deviceOptions = ref<DeviceVO[]>([])
const deviceLoading = ref(false)

// 随机生成数据相关
const randomDataForm = reactive({
  deviceCount: 1,
  dataCount: 5,
  dataTypes: ['voltage', 'currents', 'activePower', 'temperature'],
  timeRange: [
    dayjs().subtract(1, 'day').format('YYYY-MM-DD HH:mm:ss'),
    dayjs().format('YYYY-MM-DD HH:mm:ss')
  ] as string[]
})
const randomJsonData = ref('')

// 获取设备列表
const loadDevices = async () => {
  deviceLoading.value = true
  try {
    const res = await DeviceApi.getDeviceList()
    deviceOptions.value = res || []
  } catch (error) {
    console.error('获取设备列表失败', error)
  } finally {
    deviceLoading.value = false
  }
}

// 打开随机生成数据弹窗
const open = () => {
  dialogVisible.value = true
  // 默认选择所有数据类型
  randomDataForm.dataTypes = reportDataTypeOptions.map((item) => item.value)
  // 设置默认时间范围为过去24小时
  randomDataForm.timeRange = [
    dayjs().subtract(1, 'day').format('YYYY-MM-DD HH:mm:ss'),
    dayjs().format('YYYY-MM-DD HH:mm:ss')
  ]
  randomJsonData.value = '' // 清空之前生成的数据
  loadDevices() // 加载设备列表
}

// 生成随机数据
const generateRandomData = () => {
  if (!deviceOptions.value || deviceOptions.value.length === 0) {
    ElMessage.warning('没有可用的设备，请先添加设备')
    return
  }

  // 生成指定数量的随机数据
  const randomData: Omit<any, 'id' | 'createTime'>[] = []
  const selectedDevices = getRandomDevices(randomDataForm.deviceCount)

  for (let i = 0; i < randomDataForm.dataCount; i++) {
    // 为每条数据随机选择一个设备
    const device = selectedDevices[Math.floor(Math.random() * selectedDevices.length)]
    // 随机选择一个数据类型
    const dataType =
      randomDataForm.dataTypes[Math.floor(Math.random() * randomDataForm.dataTypes.length)]
    // 随机生成数据级别
    const dataLevel =
      reportDataLevelOptions[Math.floor(Math.random() * reportDataLevelOptions.length)].value
    // 随机生成时间
    const reportTime = generateRandomTime(randomDataForm.timeRange[0], randomDataForm.timeRange[1])

    // 根据数据类型生成随机值
    const dataValue = generateRandomValue(dataType)

    // 生成随机能耗
    const energyConsumption = Math.floor(Math.random() * 150) + 50

    // 根据数据类型和级别生成消息
    const message = generateMessage(dataType, dataLevel, dataValue)

    // 随机选择状态
    const status = reportStatusOptions[Math.floor(Math.random() * reportStatusOptions.length)].value

    // 创建数据对象
    randomData.push({
      deviceId: device.deviceId,
      reportDataType: dataType,
      reportDataValue: dataValue,
      reportDataLevel: dataLevel,
      reportDataTime: reportTime,
      energyConsumption: energyConsumption,
      message: message,
      status: status
    })
  }

  // 将随机数据转换为JSON字符串并显示
  randomJsonData.value = JSON.stringify(randomData, null, 2)
}

// 从可用设备中随机选择指定数量的设备
const getRandomDevices = (count: number) => {
  if (deviceOptions.value.length <= count) {
    return [...deviceOptions.value]
  }

  const shuffled = [...deviceOptions.value].sort(() => 0.5 - Math.random())
  return shuffled.slice(0, count)
}

// 在指定时间范围内生成随机时间
const generateRandomTime = (start: string, end: string) => {
  const startTime = new Date(start).getTime()
  const endTime = new Date(end).getTime()
  const randomTime = startTime + Math.random() * (endTime - startTime)
  return dayjs(randomTime).format('YYYY-MM-DD HH:mm:ss')
}

// 根据数据类型生成随机值
const generateRandomValue = (dataType: string) => {
  switch (dataType) {
    case 'voltage':
      // 电压：正常约220V，波动范围200-240
      return +(200 + Math.random() * 40).toFixed(1)
    case 'currents':
      // 电流：范围0.5-15A
      return +(0.5 + Math.random() * 14.5).toFixed(2)
    case 'activePower':
      // 功率：范围100-5000W
      return +(100 + Math.random() * 4900).toFixed(0)
    case 'temperature':
      // 温度：范围20-80℃
      return +(20 + Math.random() * 60).toFixed(1)
    default:
      return +(Math.random() * 100).toFixed(1)
  }
}

// 根据数据类型和级别生成消息
const generateMessage = (dataType: string, level: string, value: number) => {
  const typeLabel = getReportDataTypeLabel(dataType)
  const levelLabel = getReportDataLevelLabel(level)

  switch (level) {
    case 'info':
      return `${typeLabel}正常，当前值${value}，运行正常`
    case 'warning':
      return `${typeLabel}警告，当前值${value}，请注意监控`
    case 'danger':
      return `${typeLabel}异常，当前值${value}，建议立即检查设备`
    default:
      return `${typeLabel}数据上报，当前值${value}`
  }
}

// 获取数据类型标签
const getReportDataTypeLabel = (value: string) => {
  return reportDataTypeOptions.find((item) => item.value === value)?.label || value
}

// 获取数据级别标签
const getReportDataLevelLabel = (value: string) => {
  return reportDataLevelOptions.find((item) => item.value === value)?.label || value
}

// 复制JSON到剪贴板
const copyJsonToClipboard = () => {
  navigator.clipboard
    .writeText(randomJsonData.value)
    .then(() => {
      ElMessage.success('已复制到剪贴板')
    })
    .catch(() => {
      ElMessage.error('复制失败，请手动复制')
    })
}

// 提交随机生成的数据到后端
const submitRandomData = async () => {
  if (!randomJsonData.value) {
    ElMessage.warning('请先生成随机数据')
    return
  }

  try {
    // 解析JSON数据
    const dataList = JSON.parse(randomJsonData.value) as any[]
    if (!dataList || !Array.isArray(dataList) || dataList.length === 0) {
      ElMessage.error('数据格式错误，请重新生成')
      return
    }

    // 确认提交
    await ElMessageBox.confirm(
      `确定要逐条提交这 ${dataList.length} 条随机生成的数据吗？每条数据将通过单独的接口调用创建，并触发WebSocket通知。`,
      '确认提交',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }
    )

    // 显示提交进度通知
    let progressNotification = ElNotification({
      title: '数据提交进度',
      message: `正在提交数据：0/${dataList.length}`,
      type: 'info',
      duration: 0
    })

    // 记录成功和失败的数量
    let successCount = 0
    let failCount = 0

    // 依次调用创建接口
    for (let i = 0; i < dataList.length; i++) {
      const item = dataList[i]
      try {
        // 更新进度提示（关闭旧通知并创建新通知）
        progressNotification.close()
        progressNotification = ElNotification({
          title: '数据提交进度',
          message: `正在提交数据：${i + 1}/${dataList.length}`,
          type: 'info',
          duration: 0
        })

        // 调用创建接口
        await ReportApi.createReportData(item)
        successCount++
      } catch (error) {
        console.error(`提交第${i + 1}条数据失败:`, error)
        failCount++
      }

      // 添加一点延时，避免请求过快
      await new Promise((resolve) => setTimeout(resolve, 100))
    }

    // 关闭进度通知
    progressNotification.close()

    // 显示结果通知
    ElNotification({
      title: '数据提交完成',
      message: `成功: ${successCount} 条, 失败: ${failCount} 条`,
      type: successCount > 0 ? 'success' : 'warning',
      duration: 5000
    })

    // 关闭弹窗并触发刷新
    if (successCount > 0) {
      dialogVisible.value = false
      emit('success')
    }
  } catch (error: any) {
    if (error === 'cancel') return
    console.error('提交随机数据失败', error)
    ElMessage.error(`提交失败: ${error.message || '未知错误'}`)
  }
}

// 定义事件
const emit = defineEmits(['success'])

// 向外暴露方法
defineExpose({ open })
</script>

<style scoped>
.json-preview {
  font-family: monospace;
  background-color: #f5f7fa;
}
</style>
